<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/doc.css">
    <link rel="stylesheet" href="../lib/main.css">
    <link rel="stylesheet" href="../v1.x/crazyTable/crazyTable.css">
    <title>crazyTable</title>

</head>
<body>

<div class="doc-layout">
    <!-- 左侧导航栏 -->
    <div class="crazy-side">
        <h1>CrazyTable</h1>
        <ul>
            <li><a href="../index.html">介绍</a></li>
            <li><a href="crazyTable.html">安装和使用</a></li>
            <li><a href="crazyFilter.html">1.表格过滤</a></li>
            <li><a href="crazyEdit.html">2.单元格编辑</a></li>
            <li><a href="crazyChild.html">3.子表扩展</a></li>
            <li><a href="crazyBox.html" class="crazy-this">Box数据说明</a>
                <div>
                    <ul>
                        <li><a href="#intro">- 介绍</a></li>
                        <li><a href="#submit">- box提交数据结构</a></li>
                        <li><a href="#checkbox">- checkbox</a></li>
                        <li><a href="#radio">- radio</a></li>
                        <li><a href="#datetime">- datetime</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

    <!-- 正文 -->
    <div class="doc-content" id="doc-content">
        <div class="layui-main">
            <h1 class="doc-h1">Box数据说明</h1>
            <div class="layui-text">
                表格的过滤筛选。会在表头单元格右侧增加一个 <i class="layui-icon layui-icon-search layui-blue"></i> 的图标。
                点击 <i class="layui-icon layui-icon-search layui-blue"></i> ，弹出一个box。所有的操作都在这个box里面。
            </div>

            <!-- 1 -->
            <div id="intro">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>展示效果</legend>
                </fieldset>
                <div class="layui-text">
                    本文重点介绍了<em>box弹出窗</em> 点击时候的取值。
                </div>
            </div>

            <!-- 2 -->
            <div id="submit">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>box提交数据结构</legend>
                </fieldset>

                <div class="layui-text">
                    <ul>
                        <li><em>调整前</em> 弹出窗口<em>box</em>，点击提交以后，里面的<em>form</em> 提交的数据。</li>
                        <li><em>调整中</em> 将<em>调整前</em>的值进行转换，主要是针对checkbox提交的数据的第一次处理。</li>
                        <li><em>调整后</em> 将<em>调整中</em>的值进行转换，根据field、name字段，整理当前的<em>show、req</em>。这里会根据是否是数据字典或数组，整理成对应的数据结构。
                        </li>
                    </ul>
                </div>
                <div class="crazy-img"><img src="../img/values_of_box_submit.png" alt="box弹出窗点击提交的数据结构"></div>
            </div>

            <!-- 3 -->
            <div id="checkbox">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>checkbox 提交数据结构</legend>
                </fieldset>

                <div class="layui-text">
                    对<em>checkbox</em> ，form.on中传递过来的参数的结构，是带有下标的。因此我们需要做一些处理。
                    <ul>
                        <li><em>选中1个</em></li>
                    </ul>
                </div>
                <div class="crazy-img"><img src="../img/values_of_checkbox.png" alt=""></div>
                <div class="layui-text">
                    <ul>
                        <li><em>选中N个</em></li>
                    </ul>
                </div>
                <div class="crazy-img"><img src="../img/values_of_checkbox_more.png" alt=""></div>

            </div>

            <!-- 4 -->
            <div id="radio">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>radio 提交数据结构</legend>
                </fieldset>

                <div class="layui-text">
                    对<em>radio</em> ，form.on中传递过来的参数的结构，很正常。
                    <ul>
                        <li><em>选中</em></li>
                    </ul>
                </div>
                <div class="crazy-img"><img src="../img/values_of_radio.png" alt=""></div>

            </div>

            <!-- 5 -->
            <div id="datetime">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>datetime 提交数据结构</legend>
                </fieldset>

                <div class="layui-text">
                    对<em>datetime</em> ，必须要重点讲解下。
                    <ul>
                        <li>在定义的时候，如下几个参数非常重要：<em>type, format</em>。</li>
                        <li>其中format还包括<em>show、req</em>两个参数。</li>
                    </ul>
                </div>
                <pre class="layui-code" lay-encode="true">editConfig: {type: 'datetime', format: {show: 'yyyy-MM-dd HH:mm:ss', req: 'int'}}</pre>
                <div class="layui-text">
                    <ul>
                        <li><em>选中</em></li>
                    </ul>
                </div>
                <div class="crazy-img"><img src="../img/values_of_datetime.png" alt=""></div>
            </div>

            <!-- footer -->
            <div class="crazy-footer"></div>

        </div>
    </div>

</div>

<script type="text/javascript" src="../lib/layui/layui.all.js"></script>

<script>

</script>


</body>
</html>